<template>
  <div>
    <div class="grid gap-[20px]" :class="formCreaterData.gridClass" :key="key">
      <div ref="MyFormCreate" class="myFormCreate">
        <form-create v-bind="$attrs" label-position="right"  :rule="rule" :option="option">
          <template v-for="(item, index) in soltRule" :key="index" #[getSlotName(item)]="scope">
            <!-- <el-form-item> -->
            <slot :name="`field-${item.field}`" :data="scope"></slot>
            <!-- </el-form-item> -->
          </template>
        </form-create>
      </div>
      <div>
        <slot>

        </slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Options } from "@form-create/element-ui"
import { useResizeObserver } from "@vueuse/core";
const props = defineProps({
  rule: {
    type: Array<any>,
    default: () => []
  },
  itemMinWidth: {
    type: Number,
    default: 120
  },
  col: {
    type: Object,
    default: () => ({
      xs: 24,
      sm: 12,
      md: 8,
      lg: 6,
      xl: 6,
    })
  },
  listenResize: {
    type: Boolean,
    default: false
  },
  clearEvent: {
    type: Function,
    default: null
  }
})

const MyFormCreate = ref()
const rowSum = ref(4)
const key = ref(0)
const option: Options = {
  form: {
    labelWidth: "auto"
  },
  submitBtn: false,
  row: {
    gutter: 16
  },
  col: props.col
}
const formCreaterData = reactive({
  gridClass: "grid-cols-[1fr_minmax(120px,150px)]",
  ruleLength: props.rule.filter(item => !item.hidden).length,
  colsMap: {
    1: {
      col: 24,
      gridClass: "grid-cols-[1fr_3fr]"
    },
    2: {
      col: 12,
      gridClass: "grid-cols-[2fr_2fr]"
    },
    3: {
      col: 8,
      gridClass: "grid-cols-[3fr_1fr]"
    },
  }
})

onBeforeMount(() => {
  if (formCreaterData.ruleLength < 4) {
    let col = formCreaterData.colsMap[formCreaterData.ruleLength].col
    formCreaterData.gridClass = formCreaterData.colsMap[formCreaterData.ruleLength].gridClass
    option.col = {
      xs: 24,
      sm: col,
      md: col,
      lg: col,
      xl: col,
    }
  }
  if (props.listenResize) {
    useResizeObserver(MyFormCreate, (entries) => {
      const { width } = entries[0].contentRect
      let trueRowSum = formCreaterData.ruleLength > parseInt(width / props.itemMinWidth) ?
        parseInt(width / props.itemMinWidth) : formCreaterData.ruleLength
      trueRowSum = trueRowSum > 4 ? 4 : trueRowSum
      if (trueRowSum <= 4 && trueRowSum > 0 && rowSum.value != trueRowSum) {
        rowSum.value = trueRowSum
        option.col = {
          span: 6,
          xs: 24,
          sm: rowSum.value > 1 ? 12 : 24,
          md: rowSum.value > 2 ? 8 : rowSum.value > 1 ? 12 : 24,
          lg: rowSum.value > 3 ? 6 : rowSum.value > 2 ? 8 : rowSum.value > 1 ? 12 : 24,
          xl: rowSum.value > 3 ? 6 : rowSum.value > 2 ? 8 : rowSum.value > 1 ? 12 : 24,
        }
        key.value++
      }
    })
  }
  props.rule.forEach((item, index) => {
    if (!item.hidden && !item.on?.clear && props.clearEvent && item.type != 'fieldComponent') {
      if (item.on) {
        item.on.clear = props.clearEvent
      } else {
        item.on = {
          clear: props.clearEvent
        }
      }
    }
  })
})

const soltRule = computed(() => {
  return props.rule.filter(item => item.type == 'fieldComponent')
})

const getSlotName = (item: any): string => {
  return `field-${item.field}`
}
</script>

<style lang="scss" scoped>
.myFormCreate {
  ::v-deep(.el-form-item) {
    width: 100%;
    .el-form-item{
      margin-bottom: 0 !important;
    }
  }
}
</style>
